<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>

  <script src="../../cdn/vue/vue.global.min.js"></script>
  <!-- 导入表格需要的包 -->

  <script src="https://cdn.staticfile.org/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
  <script src="https://cdn.staticfile.org/xlsx/0.18.2/xlsx.full.min.js"></script>
  <link rel="stylesheet" href="../../cdn/element-plus/index.css" />
  <script src="../../cdn/element-plus/index.full.min.js"></script>
  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">
    <avue-crud ref="crud" :option="option" :data="data" :table-loading="tableLoading" @tree-load="treeLoad"
      @row-del="rowDel" @currentRowChange="handleCurrentChange" @row-dblclick="handleRowDBLClick"
      @row-click="handleRowClick">
      <template #menu="scope">
        <el-button text :size="scope.size" :type="scope.type" @click="tip(scope)">自定义</el-button>
      </template>
    </avue-crud>
  </div>
</body>
<script>
  var app = Vue.createApp({
    data() {
      return {
        tableLoading: true,
        option: {
          lazy: true,
          labelWidth: 100,
          highlightCurrentRow: true,
          headerAlign: 'center',
          align: 'center',
          expandAll: false,
          expandLevel: 2,
          border: true,
          index: true,
          column: [{
            label: '事件',
            prop: 'event',
            align: 'left',
            width: 200
          },
          {
            label: 'ID',
            prop: 'id'
          },
          {
            label: '时间线',
            prop: 'timeLine',
            sortable: true
          },
          {
            label: '自定义图标',
            prop: 'icon',
            type: "icon",
            iconList: [{
              label: '基本图表',
              list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
            }]
          },
          {
            label: '备注',
            prop: 'comment'
          }]
        },
        data: [
          {
            id: 0,
            event: '事件',
            timeLine: 50,
            icon: 'el-icon-time',
            comment: '无',
            hasChildren: true
          },
          {
            id: 1,
            event: '事件1',
            icon: 'el-icon-bell',
            timeLine: 100,
            comment: '无',
            children: [
              {
                id: 2,
                parentId: 1,
                event: '事件2',
                icon: 'el-icon-star-on',
                timeLine: 10,
                comment: '无'
              },
              {
                id: 3,
                event: '事件3',
                timeLine: 90,
                comment: '无',
                children: [
                  {
                    id: 4,
                    event: '事件4',
                    timeLine: 5,
                    comment: '无'
                  },
                  {
                    id: 5,
                    event: '事件5',
                    timeLine: 10,
                    comment: '无'
                  },
                  {
                    id: 6,
                    event: '事件6',
                    timeLine: 75,
                    comment: '无',
                    children: [
                      {
                        id: 7,
                        event: '事件7',
                        timeLine: 50,
                        comment: '无',
                        children: [
                          {
                            id: 71,
                            event: '事件71',
                            timeLine: 25,
                            comment: 'xx'
                          },
                          {
                            id: 72,
                            event: '事件72',
                            timeLine: 5,
                            comment: 'xx'
                          },
                          {
                            id: 73,
                            event: '事件73',
                            timeLine: 20,
                            comment: 'xx'
                          }
                        ]
                      },
                      {
                        id: 8,
                        event: '事件8',
                        timeLine: 25,
                        comment: '无'
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ],
      }
    },
    created() {
      setTimeout(() => {
        this.tableLoading = false;
      }, 2000);
    },
    methods: {
      treeLoad(tree, treeNode, resolve) {
        console.log('懒加载')
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: '2016-05-01',
              event: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              event: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ])
        }, 1000)
      },
      handleCurrentChange(val) {
        this.$message.success('查看控制台')
        console.log('单选', val);
      },
      handleRowClick(row, event, column) {
        this.$message.success('查看控制台')
        console.log('单机', row);
      },
      handleRowDBLClick(row, event) {
        this.$message.success('查看控制台')
        console.log('双击', row);
      },
      tip(scope) {
        this.$message.success('查看控制台')
        console.log('行数据', scope);
      },
      rowDel(form, index, done) {
        done(form);
        this.$message.success('删除数据' + JSON.stringify(form));
      },
      rowSave(form, done, loading) {
        this.$message.success('模拟网络请求')
        setTimeout(() => {
          this.$message.success('关闭按钮等待');
          loading();
        }, 1000)
        setTimeout(() => {
          this.$message.success('新增数据' + JSON.stringify(form));
          done(form);
        }, 2000)
      },
      rowUpdate(form, index, done, loading) {
        this.$message.success('模拟网络请求')
        setTimeout(() => {
          this.$message.success('关闭按钮等待');
          loading();
        }, 1000)
        setTimeout(() => {
          this.$message.success('编辑数据' + JSON.stringify(form) + '数据序号' + index);
          done(form);
        }, 2000)
      },
    }
  })
  app.use(ElementPlus)
  app.use(AVUE)
  app.mount('#app')
</script>

</html>